import Home from './components/Home'
import Search from './components/Search'
import Comment from './components/Comment'
import NotFound from './components/NotFound'
import './App.css'

import {
  BrowserRouter as Router,
  NavLink,
  Route,
  Switch,
} from 'react-router-dom'
import Goods from './components/Goods'

const App = () => {
  return (
    <Router>
      <div className="app">
        <h1>app</h1>
        <div>
          <NavLink exact activeClassName="myActive" to="/">
            首页
          </NavLink>
          &nbsp;
          <NavLink activeClassName="myActive" to="/comment">
            评论
          </NavLink>
          &nbsp;
          <NavLink activeClassName="myActive" to="/search">
            搜索
          </NavLink>
          &nbsp;
          {/* ------------------- */}
          <NavLink activeClassName="myActive" to="/goods/1">
            商品1
          </NavLink>
          &nbsp;
          <NavLink activeClassName="myActive" to="/goods/2">
            商品2
          </NavLink>
          &nbsp;
          <NavLink activeClassName="myActive" to="/goods/3">
            商品3
          </NavLink>
          &nbsp;
        </div>
        <Switch>
          <Route exact path="/" component={Home}></Route>
          <Route path="/comment" component={Comment}></Route>
          <Route path="/search" component={Search}></Route>
          <Route path="/goods/:id" component={Goods}></Route>

          <Route component={NotFound}></Route>
        </Switch>
      </div>
    </Router>
  )
}

export default App
